import React, { Component } from 'react'
import { NavLink } from "react-router-dom"
import { Icon } from 'react-vant';
import { Tabbar } from 'react-vant';
import { Badge, TabBar } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
const tabs = [
  {
    key: 'home',
    title: <NavLink to="/home">首页</NavLink>,
    icon: <AppOutline />,
    badge: Badge.dot,
  },
  {
    key: 'todo',
    title: <NavLink to="/shopcar">购物车</NavLink>,
    icon: <UnorderedListOutline />,
    badge: '5',
  },
  {
    key: 'todo111',
    title: <NavLink to="/address">地址</NavLink>,
    icon: <UnorderedListOutline />,
    badge: '5',
  },
  {
    key: 'todo111222',
    title: <NavLink to="/form">form</NavLink>,
    icon: <UnorderedListOutline />,
    badge: '5',
  },
  {
    key: 'message',
    title: '我的消息',
    icon: (active) =>
      active ? <MessageFill /> : <MessageOutline />,
    badge: '99+',
  },
  {
    key: 'personalCenter',
    title: '个人中心',
    icon: <UserOutline />,
  },
]
class Footer extends Component {
  render() {
    return (
      <div className='footer'>
 
        <Tabbar>
          <Tabbar.Item icon="home-o">
              <NavLink to="/home">首页</NavLink>
          </Tabbar.Item>
          <Tabbar.Item icon="search">
              <NavLink to="/shopcar">购物车</NavLink>
          </Tabbar.Item>
          <Tabbar.Item icon="friends-o">
               <NavLink to="/delivelist">我的订单</NavLink>
          </Tabbar.Item>
          <Tabbar.Item icon="setting-o">
               <NavLink to="/detail">详情</NavLink>
          </Tabbar.Item>
          <Tabbar.Item icon="setting-o">
             <NavLink to="/address">我的地址</NavLink>
          </Tabbar.Item>
        </Tabbar> 
         {/* <TabBar>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar> */}
      </div>
    )
  }
}

export default Footer